<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  feed_back_types_api,
  feed_back_add_api,
} from "@/package/my/api/guider_home";
import { upload_up } from "@/api/upload";
import { chooseMedia, uploadWrapper, previewImage } from "@/utils/meida";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormCheckbox from "@/components/form/checkbox.vue";
import FormWord from "@/components/form/word.vue";
import IconClose from "@/components/icon/close.vue";
import FormButton from "@/components/form/button.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad(() => {
  feed_back_types_api().then((resp) => {
    typeList.value = resp;
    formData.type = resp[0]?.id || 0;
  });
});

const typeList = ref<any[]>([]);

const formData = reactive({
  type: 0,
  content: "",
  file_resource: [] as string[],
});

const imgClick = (type: "del" | "upload", index: number) => {
  if (type === "del") {
    formData.file_resource.splice(index, 1);
  } else if (type === "upload") {
    chooseMedia(
      { count: 9 - formData.file_resource.length, mediaType: ["image"] },
      (resp) => {
        Toast.showLoading();
        uploadWrapper(
          resp.map((i) => i.tempFilePath),
          (resp) => {
            formData.file_resource.push(...resp);
            Toast.hideLoading();
          },
          (path) => {
            return upload_up(path, { type: 2 }).then((resp) => {
              return resp.map((i) => i.url);
            });
          }
        );
      }
    );
  } else {
    previewImage(toRaw(formData).file_resource, index);
  }
};

const submitClick = () => {
  Toast.showLoading();
  feed_back_add_api(toRaw(formData))
    .then(() => {
      Toast.hideLoading();
      popupModal.value?.show(
        {
          content: "提交反馈成功",
          showCancel: false,
          confirmText: "我知道了",
        },
        () => Router.navigateBack()
      );
    })
    .catch(() => Toast.hideLoading());
};

const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <view class="create-type">
    <view class="create-type-title">反馈类型</view>
    <view
      class="create-type-item"
      v-for="i of typeList"
      :key="i.id"
      @click="formData.type = i.id"
    >
      <view class="create-type-radio">
        <FormCheckbox :modelValue="formData.type === i.id" />
      </view>
      <view class="create-type-text">{{ i.name }}：{{ i.desc }}</view>
    </view>
  </view>

  <view class="create-content">
    <view class="create-content-title">问题描述（必填）</view>
    <view class="create-content-wrapper">
      <FormWord :modelValue="formData.content.length" :maxlength="200">
        <textarea
          class="create-content-input"
          v-model="formData.content"
          auto-height
          placeholder="请输入问题描述～"
        />
      </FormWord>
    </view>
  </view>

  <view class="create-img">
    <view class="create-img-title">图片补充（选填） </view>
    <view class="create-img-desc">
      提交截图或照片（可上传相关截图或照片来辅助说明相关错误及反馈）
    </view>
    <view class="create-img-wrapper">
      <view class="create-img-upload" @click="imgClick('upload')">
        <view class="create-img-upload2"></view>
        <view class="create-img-upload3"></view>
      </view>
      <view
        class="create-img-item"
        v-for="(i, d) of formData.file_resource"
        :key="i"
      >
        <image
          class="create-img-source"
          :src="i"
          mode="aspectFill"
          @click="imgClick('preview', d)"
        />
        <view class="create-img-del" @click.stop="imgClick('del', d)">
          <IconClose size="24rpx" color="rgba(255, 255, 255, 0.8)" />
        </view>
      </view>
    </view>
  </view>

  <view class="create-btn">
    <view @click="submitClick">
      <FormButton :disabled="formData.content.length === 0">提交</FormButton>
    </view>
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.create-type {
  padding-bottom: 20rpx;

  .create-type-title {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .create-type-item {
    display: flex;
    align-items: flex-start;
    margin: 0 30rpx 40rpx;
  }

  .create-type-radio {
    flex-shrink: 0;
    margin-right: 2rpx;
  }

  .create-type-text {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
    font-size: 26rpx;
    color: #323233;
    line-height: 40rpx;
  }
}

.create-content {
  margin-bottom: 40rpx;

  .create-content-title {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .create-content-wrapper {
    padding: 0 30rpx;
  }

  .create-content-input {
    display: block;
    width: 100%;
    min-height: 236rpx;
    padding: 30rpx;
    font-size: 26rpx;
    color: #333333;
    line-height: 36rpx;
    border-radius: 20rpx;
    background-color: #f9f9f9;
    box-sizing: border-box;
  }
}

.create-img {
  .create-img-title {
    padding-left: 30rpx;
    margin-bottom: 10rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .create-img-desc {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }

  .create-img-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-bottom: 40rpx;
  }

  .create-img-upload,
  .create-img-item {
    position: relative;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }

  .create-img-upload,
  .create-img-source {
    width: 150rpx;
    height: 150rpx;
    border-radius: 20rpx;
  }

  .create-img-upload {
    background-color: #f6f6f6;
  }

  .create-img-upload2,
  .create-img-upload3 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48rpx;
    height: 4rpx;
    border-radius: 2rpx;
    background-color: #dddddd;
    transform: translate(-50%, -50%);
  }

  .create-img-upload3 {
    width: 4rpx;
    height: 48rpx;
  }

  .create-img-source {
    display: block;
  }

  .create-img-del {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4rpx;
    border-radius: 0 20rpx 0 10rpx;
    background: rgba(0, 0, 0, 0.5);
  }
}

.create-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>